<template>
  <div class="notice-bar" :style="{ background, height: `${height}px` }" v-show="!state.isMode">
    <div class="notice-bar-warp" :style="{ color, fontSize: `${size}px` }">
      <i v-if="leftIcon" class="notice-bar-warp-left-icon" :class="leftIcon"></i>
      <div class="notice-bar-warp-text-box" ref="noticeBarWarpRef">
        <div class="notice-bar-warp-text" ref="noticeBarTextRef" v-if="!scrollable">{{ text }}</div>
        <div class="notice-bar-warp-slot" v-else><slot /></div>
      </div>
      <SvgIcon :name="rightIcon" v-if="rightIcon" class="notice-bar-warp-right-icon" @click="onRightIconClick" />
    </div>
  </div>
</template>

<script setup lang="ts" name="noticeBar">
import { reactive, ref, onMounted, nextTick } from 'vue'

// 定义父组件传过来的值
const props = defineProps({
  // 通知栏模式，可选值为 closeable link
  mode: {
    type: String,
    default: () => '',
  },
  // 通知文本内容
  text: {
    type: String,
    default: () => '',
  },
  // 通知文本颜色
  color: {
    type: String,
    default: () => 'var(--el-color-warning)',
  },
  // 通知背景色
  background: {
    type: String,
    default: () => 'var(--el-color-warning-light-9)',
  },
  // 字体大小，单位px
  size: {
    type: [Number, String],
    default: () => 14,
  },
  // 通知栏高度，单位px
  height: {
    type: Number,
    default: () => 40,
  },
  // 动画延迟时间 (s)
  delay: {
    type: Number,
    default: () => 1,
  },
  // 滚动速率 (px/s)
  speed: {
    type: Number,
    default: () => 100,
  },
  // 是否开启垂直滚动
  scrollable: {
    type: Boolean,
    default: () => false,
  },
  // 自定义左侧图标
  leftIcon: {
    type: String,
    default: () => '',
  },
  // 自定义右侧图标
  rightIcon: {
    type: String,
    default: () => '',
  },
})

// 定义子组件向父组件传值/事件
const emit = defineEmits(['close', 'link'])

// 定义变量内容
const noticeBarWarpRef = ref()
const noticeBarTextRef = ref()
const state = reactive({
  order: 1,
  oneTime: 0,
  twoTime: 0,
  warpOWidth: 0,
  textOWidth: 0,
  isMode: false,
})

// 初始化 animation 各项参数
const initAnimation = () => {
  nextTick(() => {
    state.warpOWidth = noticeBarWarpRef.value.offsetWidth
    state.textOWidth = noticeBarTextRef.value.offsetWidth
    document.styleSheets[0].insertRule(`@keyframes oneAnimation {0% {left: 0px;} 100% {left: -${state.textOWidth}px;}}`)
    document.styleSheets[0].insertRule(`@keyframes twoAnimation {0% {left: ${state.warpOWidth}px;} 100% {left: -${state.textOWidth}px;}}`)
    computeAnimationTime()
    setTimeout(() => {
      changeAnimation()
    }, props.delay * 1000)
  })
}
// 计算 animation 滚动时长
const computeAnimationTime = () => {
  state.oneTime = state.textOWidth / props.speed
  state.twoTime = (state.textOWidth + state.warpOWidth) / props.speed
}
// 改变 animation 动画调用
const changeAnimation = () => {
  if (state.order === 1) {
    noticeBarTextRef.value.style.cssText = `animation: oneAnimation ${state.oneTime}s linear; opactity: 1;}`
    state.order = 2
  } else {
    noticeBarTextRef.value.style.cssText = `animation: twoAnimation ${state.twoTime}s linear infinite; opacity: 1;`
  }
}
// 监听 animation 动画的结束
const listenerAnimationend = () => {
  noticeBarTextRef.value.addEventListener(
    'animationend',
    () => {
      changeAnimation()
    },
    false
  )
}
// 右侧 icon 图标点击
const onRightIconClick = () => {
  if (!props.mode) return false
  if (props.mode === 'closeable') {
    state.isMode = true
    emit('close')
  } else if (props.mode === 'link') {
    emit('link')
  }
}
// 页面加载时
onMounted(() => {
  if (props.scrollable) return false
  initAnimation()
  listenerAnimationend()
})
</script>

<style scoped lang="scss">
.notice-bar {
  padding: 0 15px;
  width: 100%;
  border-radius: 4px;
  .notice-bar-warp {
    display: flex;
    align-items: center;
    width: 100%;
    height: inherit;
    .notice-bar-warp-text-box {
      flex: 1;
      height: inherit;
      display: flex;
      align-items: center;
      overflow: hidden;
      position: relative;
      .notice-bar-warp-text {
        white-space: nowrap;
        position: absolute;
        left: 0;
      }
      .notice-bar-warp-slot {
        width: 100%;
        white-space: nowrap;
        :deep(.el-carousel__item) {
          display: flex;
          align-items: center;
        }
      }
    }
    .notice-bar-warp-left-icon {
      width: 24px;
      font-size: inherit !important;
    }
    .notice-bar-warp-right-icon {
      width: 24px;
      text-align: right;
      font-size: inherit !important;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
